import { Component, EventEmitter, Output } from '@angular/core';
// import { PlcDataField, SiteNodeConfig } from '../../models';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { ConfirmationService } from 'primeng/api';
import { v4 as guid } from "uuid";
import { FieldType } from 'src/components/scenarios/enums';
import { SiteNodeConfig, PlcDataField } from 'src/components/scenarios/models';
// import { FieldType } from '../../enums';
@Component({
  selector: 'app-site-setting',
  templateUrl: './site-setting.component.html',
  styleUrl: './site-setting.component.scss'
})
export class SiteSettingComponent {


  sidebarRightVisible: boolean = false;
  item?: SiteNodeConfig;

  types: FieldType[] = Object.values(FieldType);


  @Output()
  onHide: EventEmitter<SiteNodeConfig> = new EventEmitter();

  constructor(private confirmService: ConfirmationService) {


  }

  onEdit(site: SiteNodeConfig) {
    this.item = { ...site };
    this.sidebarRightVisible = true;
  }
  onSidebarHide() {
    this.onHide.next(this.item!);
  }

  onFiedEditConfirm(field: PlcDataField) {
    if (field.Id) {
      this.item!.Fields = this.item!.Fields.map(f => f.Id === field.Id ? field : f);
    }
    else {
      this.item?.Fields.push({ ...field, Id: guid() });
    }
  }

  onDeleteField(field: PlcDataField) {
    console.log(field);
    this.confirmService.confirm({
      message: 'Do you want to delete this field?',
      header: 'Delete Confirmation',
      icon: 'pi pi-info-circle',
      acceptButtonStyleClass: "p-button-danger p-button-text",
      rejectButtonStyleClass: "p-button-text p-button-text",
      acceptIcon: "none",
      rejectIcon: "none",

      accept: () => {
        this.item!.Fields = this.item!.Fields.filter(f => f.Id !== field.Id);
      },
      reject: () => {
      }
    });
  }

  onDragDrop(event: CdkDragDrop<PlcDataField[]>) {
    moveItemInArray(this.item!.Fields, event.previousIndex, event.currentIndex);
  }
}


